<template>
  <div class="upload-progress">
    <template
      v-if="upStatus === 'success' || upStatus === 'fail'">
      <div :class="[upStatus]">
        {{ upStatus === 'success' ? '上传成功' : '上传失败' }}
      </div>
    </template>
    <template v-else-if="upStatus === 'none'">
      未知状态
    </template>
    <template v-else>
      <div class="progress">
        <span v-if="upStatus === 'wating'" class="wating">等待上传..</span>
        <span v-else>{{ percentage }}%</span>
        <el-progress :percentage="percentage" :show-text="false"></el-progress>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  props: ['status'],
  computed: {
    upStatus() {
      console.log(this.status)
      const stringStatus = ['wating', 'success', 'fail']
      if (stringStatus.indexOf(this.status) > -1) {
        return this.status
      } else if (typeof this.status === 'number') {
        return 'pendding'
      } else {
        return 'none'
      }
    },
    percentage() {
      return this.upStatus === 'pendding' ? this.status : 0
    }
  }
}
</script>

<style lang="scss" scoped>
.upload-progress {
  width: 100%;
  position: relative;

  .success {
    color: $defaultBlue;
  }
  .fail {
    color: #FF5722;
  }
  .successText, .failText {
    font-size: 14px;
  }
  .wating {
    font-size: 12px;
    color: #666;
  }
  .progress {
    ::v-deep .el-progress-bar__outer {
      border-radius: 100px;
    }
  }
}
</style>